import { observer } from "mobx-react-lite";
import userStore from "../stores/UserStore";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";

function UserInfo(){
    let navigator = useNavigate();
    let user = userStore.getUser();
    const logout = ()=>{
        userStore.logout();
        navigator('/login');
    }
    if(!user)
        return(
            <div>
                <Link to = "/login" style={{color:'white'}}>登录&nbsp;&nbsp;</Link>
                <span>|</span>
                <Link to = "/reg" style={{color:'white'}}>&nbsp;&nbsp;注册</Link>
            </div>
        )
    return(
        <div style={{display:'flex'}}>
            欢迎您，{user.name}
            &nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;
            <a href="#" style={{color:'white'}} onClick={(e) => {e.preventDefault();logout()}}>注销</a>
        </div>
    )
}

export default observer(UserInfo);